<template>
  <div id="ArticleCard">
    <div class="top">
      <router-link target="_blank" :to="{path: '/article'}">
        <div class="title" >
          {{articleData.title}}
        </div>
      </router-link>  
      <div class="titleCount">
        <div class="browseCount">
          <span class="icon-eye"></span>
          {{articleData.browseCount}}
        </div>
        <div class="commentCount">
          <span class="icon-bubble"></span>
          {{articleData.commentCount}}
        </div>
      </div>
    </div>
    <div class="mid">
      <div class="introduce">
        {{articleData.introduce}}
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="author">
          <span class="icon-user"></span>
          作者:&nbsp;{{articleData.author}}
        </div>
        <div class="label">
          标签:
          <span v-for="(item,index) in articleData.labels" :key="index">{{item}}</span>
        </div>
      </div>
      <div class="right">
        <div class="datetime">
        {{articleData.datetime}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations,mapState} from 'vuex'

export default {
  name: "ArticleCard",
  data() {
    return {
      articleData: {
        title: 'title',
        browseCount: 99,
        commentCount: 127,
        introduce: '这是文章的介绍',
        author: 'tj',
        datetime: '2023-9-22 11:05',
        labels: ['spring','vue']
      }
    }
  },
  computed: {
    ...mapState([])
  },
  methods: {
    ...mapMutations([]),
  }
}
</script>

<style scoped>
#ArticleCard {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    padding: 40px;
    background-color: #fff;
    transition: all .2s ease;
}

#ArticleCard:hover {
  transform: translateY(-3px);
  /* box-shadow:0 1px 5px #A4A4A4; */
}

.top {
  display: flex;
  justify-content: space-between;
}

.title {
  font-weight: 600;
  color: #000b15;
  font-size: 20px;
  cursor: pointer;
}

.title:hover {
  text-decoration: underline #81F79F;
  color: rgb(112, 198, 70);
}

.titleCount>div {
  display: inline-block;
  margin: 0 10px;
}

.mid {
  margin:20px 0;
}

.introduce {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
} 

.bottom {
  display: flex;
  justify-content: space-between;
}

.left>div {
  display: inline-block;
}

.label {
  margin-left: 20px;
  font-size: 13px;
  cursor: pointer;
}

.label>span {
  background-color: rgb(240, 249, 235);
  color: rgb(112, 198, 70);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  margin:0 5px;
}
</style>